<template>
	<view class="container">
		<view class="flex flex-direction">
			<view class="cu-item padding-sm shadow">
				<u--form
					labelPosition="left"
					:model="expressModal"
					ref="uForm"
					errorType="toast"
				>
					<u-form-item
						label="快递单号："
						labelWidth="86px"
						prop="expressOrderNumber"
						borderBottom
						ref="item1"
					>
						<u--input
							v-model="expressModal.expressOrderNumber"
							border="surround"
							placeholder="请填写快递单号"
							clearable
							@blur="expressOrderNumberBlur"
						></u--input>
					</u-form-item>
					<u-form-item
						label="快递公司："
						labelWidth="86px"
						prop="expressCompany"
						borderBottom
						ref="item1"
					>
						<view class="flex" @click="getExpressName">
							<u-input
								v-model="expressModal.expressCompany"
								border="surround"
								placeholder="请填写快递公司"
								clearable
								suffixIcon="plus-circle"
								readonly
							></u-input>
							<!-- <u-button :customStyle="{width: '60rpx'}" type="primary" icon="map"></u-button> -->
							<!-- <u-icon name="plus-circle" :customStyle="{padding: '0 5px'}"></u-icon> -->
						</view>
					</u-form-item>
					<u-form-item
						label="手机号码："
						labelWidth="86px"
						prop="phone"
						ref="item1"
					>
						<u--input
							v-model="expressModal.phone"
							border="surround"
							placeholder="请填写手机号"
							clearable
						></u--input>
					</u-form-item>
				</u--form>
				<u-gap height="5" bgColor="#fff"></u-gap>
				<u--text type="info" iconStyle="margin-right: 10rpx;" prefixIcon="info-circle" text="温馨提示"></u--text>
				<u-gap height="5" bgColor="#fff"></u-gap>
				<u-line></u-line>
				<u-gap height="8" bgColor="#fff"></u-gap>
				<u--text type="info" size="12" text="1. 为了数据查询的准确性推荐填写正确的快递公司"></u--text>
				<u--text type="info" size="12" text="2. 因平台要求,如果查询的是顺丰,需要填写手机号"></u--text>
			</view>
			<view class="flex align-center bottom-btn margin-top-sm">
				<view class="reset-btn shadow">
					<u-button shape="circle" text="重置" @click="reset"></u-button>
				</view>
				<view class="search-btn shadow">
					<u-button shape="circle" type="primary" text="查询" @click="submit"></u-button>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-QQ -->
		<view class="ad_wrap">
			<common-ad unitId="039f6b1d4f58fa0bb8560be75f4b50d9" adType="banner" />
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="ad_wrap">
			<common-ad unitId="adunit-bdc652c8812a4926" adType="video" />
		</view>
		<!-- #endif -->
		<u-popup mode="right" :show="showExpressPicker" @close="closeExpressPicker" @open="openExpressPicker">
			<view class="picker-container">
				<u-list>
					<u-list-item
						v-for="(item, index) in expressList"
						:key="item.com"
						@click.native="expressPicker(item)"
					>
						<u-cell :title="item.exp_name"></u-cell>
					</u-list-item>
				</u-list>
			</view>
		</u-popup>
		
		<!-- <options-com @itemClick="otherAction" :list="[{title:'一转一',id:'onetoone'},{title:'增加货币',id:'add'}]"/> -->
	</view>
</template>

<script>
	import {expressQueryDetail, expressCompanyQueryByOrderNum} from "../../controller/request_ctrl";
	import {getStorage, setStorage} from "../../utils/storage_util";
	import {formatTime, formatFloat} from "../../utils/util";
	import optionsCom from "../../components/options.vue";
	import shareConfig from "../../utils/share_config";
	import { mapState, mapActions } from 'vuex';
	
	const commonExpressList = [
		{
			"com":"shunfeng",
			"exp_name":"顺丰速运"
		},
		{
			"com":"yunda",
			"exp_name":"韵达快递"
		},
		{
			"com":"ydky",
			"exp_name":"韵达快运"
		},
		{
			"com":"huitong",
			"exp_name":"百世快递(原汇通)"
		},
		{
			"com":"bsky",
			"exp_name":"百世快运"
		},
		{
			"com":"yuantong",
			"exp_name":"圆通快递"
		},
		{
			"com":"tiantian",
			"exp_name":"天天快递"
		},
		{
			"com":"jingdong",
			"exp_name":"京东快递",
		},
		{
			"com":"shentong",
			"exp_name":"申通快递"
		},
		{
			"com":"zhongtong",
			"exp_name":"中通快递"
		},
		{
			"com":"jt",
			"exp_name":"极兔速递/极兔快递",
		},
		{
			"com":"ems",
			"exp_name":"EMS"
		},{
			"com":"gdems",
			"exp_name":"广东ems快递"
		},
		{
			"com":"pingyou",
			"exp_name":"邮政快递包裹"
		},
		{
			"com":"debang",
			"exp_name":"德邦快递/物流"
		},
		{
			"com":"zhaijisong",
			"exp_name":"宅急送",
		},
		{
			"com":"quanfeng",
			"exp_name":"全峰快递"
		},
		{
			"com":"fedexcn",
			"exp_name":"Fedex联邦快递(国内)"
		},
		{
			"com":"yousu",
			"exp_name":"优速快递"
		},
		{
			"com":"sure",
			"exp_name":"速尔物流"
		},
		{
			"com":"quanyi",
			"exp_name":"全一快递"
		},
		{
			"com":"huayu",
			"exp_name":"天地华宇"
		},
		{
			"com":"longbang",
			"exp_name":"龙邦快运"
		},
		{
			"com":"xinbang",
			"exp_name":"新邦物流"
		},
		{
			"com":"guotong",
			"exp_name":"国通快递"
		},
		{
			"com":"nengda",
			"exp_name":"港中能达快递"
		},
		{
			"com":"xinfeng",
			"exp_name":"信丰物流"
		},
		{
			"com":"hmzjb",
			"exp_name":"黑猫宅急便"
		},
		{
			"com":"lianhaotong",
			"exp_name":"联昊通"
		},
		{
			"com":"zengyisudi",
			"exp_name":"增益速递"
		},
		{
			"com":"more",
			"exp_name":"更多..."
		}
	]

	let isShow = false;
	let isFirstEnter = true;
	export default {
		data() {
			return {
				expressList: [],
				showExpressPicker: false,
				expressModal: {
					expressOrderNumber: '',
					expressCompany: '',
					expressCom: '', // 快递公司key
					phone: ''
				},
				rules: {
					'expressOrderNumber': [
						{
							type: 'string',
							required: true,
							message: '请填写单号',
							trigger: ['blur', 'change']
						},{
							validator: (rule, value, callback) => {
								return /[a-zA-Z]?\d+/.test(value);
							},
							message: '请输入有效的快递单号',
							// 触发器可以同时用blur和change
							trigger: ['change','blur'],
						}
					],
					'expressCompany': {
						type: 'string',
						required: true,
						message: '请填写快递公司',
						trigger: ['blur', 'change']
					},
					'phone': {
						type: 'string',
						max: 11,
						required: false,
						message: '请填写手机号',
						trigger: ['blur', 'change']
					}
				},
			}
		},
		computed: {
			...mapState(['expressItem'])
		},
		// components:{
		// 	optionsCom: optionsCom
		// },
		watch: {
			'expressModal.expressCom': {
				handler(newVal, oldVal) {
					console.log('---- expressModal.expressCom ----', newVal, oldVal);
					if (newVal === 'shunfeng') {
						this.rules.phone.required = true;
					} else if(this.rules.phone.required) {
						this.rules.phone.required = false;
						this.$refs.uForm.setRules(this.rules);
					}
				}
			}
		},
		onLoad() {

		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		onShareAppMessage() {
			return shareConfig();
		},
		onShow() {
			if (this.expressItem) {
				this.expressModal.expressCompany = this.expressItem.exp_name;
				this.expressModal.expressCom = this.expressItem.com;
				this.setExpressItem(null);
			}
		},
		onHide() {

		},
		
		methods: {
			...mapActions(['setExpressItem','setExpressRecord']),
			getExpressName() {
				this.expressList = commonExpressList;
				this.showExpressPicker = true;
			},
			expressPicker(item) {
				this.showExpressPicker = false;
				if (item.com === "more") {
					this.gotoExpressPicker();
					return;
				}
				this.expressModal.expressCompany = item.exp_name;
				this.expressModal.expressCom = item.com;
			},
			gotoExpressPicker() {
				uni.navigateTo({
					url:'/others/pickerExpress/pickerExpress'
				})
			},
			expressOrderNumberBlur(val) {
				console.log('---- expressOrderNumberChange ----', val);
				if (!this.expressModal.expressOrderNumber.trim()) {
					return;
				}
				expressCompanyQueryByOrderNum(this.expressModal.expressOrderNumber.trim()).then((res) => {
					console.log('---- expressOrderNumberChange ----11', res);
					if (res.showapi_res_code === 0 && res.showapi_res_body && res.showapi_res_body.data) {
						const expressListSearch = res.showapi_res_body.data;
						if (expressListSearch.length === 1) {
							this.expressModal.expressCompany = expressListSearch[0].com_name;
							this.expressModal.expressCom = expressListSearch[0].com;
							return;
						}
						this.expressList = expressListSearch;
						this.showExpressPicker = true;
						
					}
				})
			},
			closeExpressPicker() {
				this.showExpressPicker = false;
			},
			openExpressPicker() {
				console.log('---- openExpressPicker ----');
				// this.setExpressList()
			},
			submit() {
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						icon: "none",
						title: "数据搜索中..."
					});
					expressQueryDetail(this.expressModal.expressOrderNumber, this.expressModal.expressCom, this.expressModal.phone).then((res) => {
						console.log('---- expressQueryDetail ----', res, res.showapi_res_body.data.length);
						uni.hideLoading();
						if (res.showapi_res_code === 0) {
							if (!res.showapi_res_body.data || res.showapi_res_body.data.length === 0) {
								uni.showToast({
									icon: 'none',
									title: res.showapi_res_body.msg,
									duration: 2500
								})
								return;
							}
							this.setExpressRecord({item: res.showapi_res_body});
							uni.navigateTo({
								url: '/others/expressRecord/expressRecord'
							});
							return;	
						}
						uni.showToast({
							icon: 'none',
							title: res.showapi_res_error,
							duration: 2500
						})
					})
				}).catch(errors => {
					uni.hideLoading();
					console.log('---- this.$refs.uForm.validate ----', errors);
					uni.showToast({
						icon: 'none',
						title: errors[0].message,
						duration: 2500
					})
				})
			},
			reset() {
				// this.$refs.uForm.resetFields();
				this.expressModal = {
					expressOrderNumber: '',
					expressCompany: '',
					expressCom: '', // 快递公司key
					phone: ''
				};
			}
		}
	}
</script>

<style scoped lang="scss">
	.container{
		width: 100%;
		height: 100%;
	}
	.bottom-btn{
		margin:20rpx 30rpx 0 30rpx;
	}
	.reset-btn{
		margin-right: 30rpx;
		flex: .5;
	}
	.search-btn{
		flex:1;
	}
	.picker-container{
		width: 100%;
		height: 100%;
	}
</style>
